<template>
    <el-dialog title="选择活动" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <div class="content" @click.stop="()=>{}">
            <el-form label-position="left" label-width="100px" style="width: 100%; padding-left: 20px;">
                <el-form-item label="所选活动：" v-if="config.count !== 1">
                    <div class="el-tag-box">
                        <el-tag v-for="(item, index) of result" :key="item.activityId" :closable="true" @close="delItem(index)">{{item.name}}</el-tag>
                    </div>
                </el-form-item>
            </el-form>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="100px" style="width: 100%">
                <input type="text" style="display: none"/><!--form input placeholder-->
                <el-row>
                    <el-col>
                        <el-form-item label="活动名称：" prop="name">
                            <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="按活动名称搜索" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
                <el-table-column align="center" width="50">
                    <template slot-scope="scope">
                        <label class="input-radio" v-if="config.count === 1">
                            <input type="radio" :value="{activityId: scope.row.activityId}" v-model="itemsRadio" @change="(e) => setValue(e.target.checked, scope.row)"/>
                            <span></span>
                        </label>
                        <label class="input-checkbox" v-else>
                            <input type="checkbox" :value="{activityId: scope.row.activityId}" v-model="itemsCheck" @change="(e) => setValue(e.target.checked, scope.row)"/>
                            <span></span>
                        </label>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="活动名称" min-width="110">
                    <template slot-scope="scope">
                        <div class="text-justify">
                            <p v-text="scope.row.name"></p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="类型" prop="type" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type===4">打折</span>
                        <span v-if="scope.row.type===5">满减</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="活动开始时间" prop="startTime">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="活动结束时间" prop="stopTime">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.stopTime, 'YYYY-MM-DD HH:mm:ss')"></span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.pageIndex"
              :page-size="listQuery.pageSize"
              background
              layout="total, prev, pager, next, jumper"
              style="text-align: center"
              :total="listTotal">
            </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer" @click.stop="()=>{}">
            <el-button type="primary" :loading="btnLoading" @click="choose">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>
<script>
  export default {
    name: 'choose-activity',
    props: {
      config: { type: Object, default(){ return {} } },
      selected: { type: Array, default(){ return [] } },
    },
    data(){
      return {
        dialogVisible: true,
        btnLoading: false,
        result: this.selected,
        itemsCheck: this.selected.length ? this.selected.map(item => { return { activityId: item.activityId }}): [],
        itemsRadio: this.selected.length ? {activityId: this.selected[0].activityId} : {},

        listQuery: {
          name: '',
          status: 1,
          pageIndex: 1,
          pageSize: 10
        },
        list: [],
        listTotal: 0,
        listLoading: false
      }
    },
    created(){
      this.getList()
    },
    methods: {
      // 获取列表
      getList() {
        this.listLoading = true;
        this.request({
          url: '/bsnl-activity/activity/query',
          method: 'post',
          data: this.listQuery
        }).then(({data, totalCount}) => {
          this.list = data;
          this.listTotal = totalCount;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      // 搜索
      search() {
        this.listQuery.pageIndex = 1;
        this.getList();
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageIndex = page;
        this.getList();
      },
      // 选择change
      setValue(checked, row){
        if(checked){
          if(this.config.count ===1 ){
            this.result = [row]
          } else {
            this.result.push({ ...row });
          }
        } else {
          let index = this.itemsCheck.findIndex(item => row.activityId === item.activityId);
          this.result.splice(index, 1);
        }
      },
      // 单击行
      clickRow(row) {
        if (this.config.count === 1) {
          this.itemsRadio = { activityId: row.activityId };
          this.result = [row];
        } else {
          let index = this.itemsCheck.findIndex(item => row.activityId === item.activityId);
          if (index < 0){
            this.itemsCheck.push({ activityId: row.activityId });
            this.result.push({ ...row });
          } else {
            this.itemsCheck.splice(index, 1);
            this.result.splice(index, 1);
          }
        }
      },
      // 通过tag删除
      delItem(index) {
        this.itemsCheck.splice(index, 1);
        this.result.splice(index, 1);
      },
      // 关闭弹窗
      close(){
        this.dialogVisible = false;
        document.body.removeChild(this.$el);
      },
      // 选完，点击确定
      choose(){
        if(this.result.length < 1){
          return this.$message.error('请选择活动');
        }
        if(this.config.count > 0 && this.itemsCheck.length > this.config.count){
          return this.$message.error(`最多选择${this.config.count}个活动`);
        }
        this.$emit('choose', this.result);
        this.close();
      }
    }
  }
</script>
